<template>
  <div class="user-card">
    <!-- 用户信息部分 -->
    <div class="user-info relative">
      <div class="user-avatar">
        <div class="avatar-placeholder">{{ userInfo?.username?.charAt(0) || 'U' }}</div>
      </div>
      <div class="user-details">
        <div class="flex items-center gap-2">
          <div class="username">{{ userInfo?.username || '用户名' }}</div>
        </div>
        <div class="user-email">{{ userInfo?.email || '暂未绑定邮箱' }}</div>
        <!-- 会员等级和到期时间 -->
        <div class="member-info mt-1.5">
          <div v-if="userInfo?.role === 'NORMAL'" class="text-xs text-gray-500">免费会员</div>
          <div v-else-if="userInfo?.role === 'VIP'" class="text-xs text-purple-500 font-medium">
            VIP会员
            <span v-if="userInfo?.vipEndTime" class="text-gray-400 font-normal ml-1"> 至 {{ formatDate(userInfo.vipEndTime) }} </span>
          </div>
          <div v-else-if="userInfo?.role === 'SVIP'" class="text-xs text-orange-500 font-medium">
            SVIP会员
            <span v-if="userInfo?.vipEndTime" class="text-gray-400 font-normal ml-1"> 至 {{ formatDate(userInfo.vipEndTime) }} </span>
          </div>
        </div>
      </div>
      <div class="absolute right-0 top-0 flex items-center gap-1">
        <div class="text-sm text-gray-800" :class="{ 'text-red-500': Number(userInfo?.points) <= 5 }">
          {{ userInfo?.points }}
        </div>
        <img class="w-4 h-4" src="@/assets/image/energy-icon.svg" alt="能量值" />
      </div>
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>

    <!-- 菜单项 -->
    <div class="menu-items">
      <div class="menu-item" @click="navigateTo('/card-redeem')">
        <div class="item-icon profile-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
        <span>充值卡密</span>
      </div>

      <div class="menu-item" @click="onHandleLogout">
        <div class="item-icon logout-icon">
          <img src="@/assets/image/logout.svg" alt="退出登录" />
        </div>
        <span>退出登录</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
const { userInfo } = toRefs(userStore);

const goToUserProfile = () => {
  // 未来可以导航到用户资料页面
  // router.push('/profile');
};

const onHandleLogout = () => {
  userStore.onLogout();
  router.push('/login');
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });
};
</script>

<style scoped>
.user-card {
  width: 16rem;
  background: white;
  border-radius: 1rem;
  box-shadow:
    0 10px 15px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--primary-purple, #6b46c1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.25rem;
}

.avatar-placeholder {
  text-transform: uppercase;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: var(--text-primary, #2d3748);
  font-size: 1rem;
}

.member-badge {
  display: flex;
  align-items: center;
}

.user-email {
  font-size: 0.8rem;
  color: var(--text-secondary, #4a5568);
  margin-top: 0.25rem;
}

.divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0.75rem 0;
}

.menu-items {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background: rgba(107, 70, 193, 0.08);
}

.item-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #4a5568);
}

.menu-item span {
  font-size: 0.9rem;
  color: var(--text-primary, #2d3748);
}

.menu-item:hover span {
  color: var(--primary-purple, #6b46c1);
}

.menu-item img {
  width: 1rem;
  height: 1rem;
}
</style>
